<template>
  <div class="content_left_sqryfb">
    <titleBox text="社区人员分布" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <div style="display: flex; flex-wrap: wrap; margin-top:10px;" v-if="jbxxinfo">
          <div style="width: 50%">
            <dataOne icon="/img/myimg/hjrk.png" title="户籍人口" :value="jbxxinfo.people_register" unit="人"></dataOne>
          </div>
          <div style="width: 50%">
            <dataOne icon="/img/myimg/czrk.png" title="常住人口" :value="jbxxinfo.people_resident" unit="人"></dataOne>
          </div>
        </div>
        <div style="align-items: center;display: flex; margin-top:20px;">

          <div ref="echartsRef" id="eChart" class="charts"></div>
          <div style="flex:1; display:flex; align-items:center;" v-if="info">
            <div class="nan">
              <div
                style="background-image: url('/img/myimg/nan.png'); background-size:40px 70px; width:40px; height:70px; margin-bottom:5px;">
              </div>
              <div style="color: #D5F2FF; font-size: 10px;">男性比例</div>
              <div style="color: #9EF7FF; font-size: 12px;">{{ info.male_ratio }}%</div>
            </div>
            <div class="nv">
              <div
                style="background-image: url('/img/myimg/nv.png'); background-size:40px 70px; width:40px; height:70px; margin-bottom:5px;">
              </div>
              <div style="color: #D5F2FF; font-size: 10px;">女性比例</div>
              <div style="color: #9EF7FF; font-size: 12px;">{{ info.female_ratio }}%</div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import { onMounted, ref, nextTick, getCurrentInstance } from "vue"
import $api from "@/utils/request.js"
import * as echarts from "echarts"
import titleBox from "../mConponents/titleBox.vue"
import dataOne from "../mConponents/dataOne.vue"
const echartsRef = ref(null)

onMounted(() => {
  getJbxxData()
  getData()

})
const info = ref(null)
const content = ref(null)
const height = ref(0)
const show = ref(false)
const getData = async () => {
  const res = await $api.get("/api/Screen/PeopleStatistics")
  if (res.code === 1) {
    info.value = res.data
    initCharts()
  }
}

const jbxxinfo = ref(null)
const getJbxxData = async () => {
  const res = await $api.get("/api/Screen/communitySummary")
  if (res.code === 1) {
    jbxxinfo.value = res.data
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}


const initCharts = () => {
  const dom = document.getElementById("eChart")
  const myChart = echarts.init(dom) // 初始化echarts实例
  const data = info.value.chart.age
  const chartData = []
  for (let i = 0; i < data.xAxis.length; i++) {
    chartData.push({
      value: data.series[i],
      name: data.xAxis[i] + "岁"
    })
  }
  const option = {
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"], // 定义外层和内层的半径
        borderWidth: 10,
        borderColor: "#fff",
        data: chartData,
        labelLine: {
          show: true,
          length: 3, // 设置标签线基础长度
          length2: 2
        },
        label: {
          show: true, // 隐藏默认的标签
          position: "outside",
          textStyle: {
            fontSize: 8, // 字体大小
            color: "#D5F2FF"
          }
        }
      }
    ],
    graphic: [{
      type: "text",
      left: "center",
      top: "50",
      style: {
        text: "常住人口",
        textAlign: "center",
        fill: "#D5F2FF", // 文字颜色
        fontSize: 10 // 文字大小
      }
    },
    {
      type: "text",
      left: "center",
      top: "65",
      style: {
        text: info.value.total + "人",
        textAlign: "center",
        fill: "#D5F2FF", // 文字颜色
        fontSize: 12 // 文字大小
      }
    }]
  }
  // 设置实例参数
  myChart.setOption(option)
}
</script>
<style scoped lang="less">
.content_left_sqryfb {
  margin-top: 10px;

  .content {
    background-color: rgba(0, 26, 29, 0.8);
    width: 330px;
    border-radius: 5px;
    margin-top: 5px;

    .charts {
      width: 200px;
      height: 130px;
    }

    .nan {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .nv {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
